<!--
 * @Author: C.
 * @Date: 2021-12-23 10:43:19
 * @LastEditTime: 2021-12-24 13:22:36
 * @Description: file content
-->
<template>
  <!-- 卡片框 -->
  <scroll-view
    scroll-y="true"
    @scrolltolower="getMoreData"
    :refresher-enabled="true"
    :refresher-triggered="register.loading"
    @refresherrefresh="onRefresh"
    :style="{ height: height + 'px' }"
    class="j-list-cpn"
  >
    <template v-if="listShow">
      <!--List 前置信息 -->
      <slot name="pre-card"></slot>
      <!-- 卡片插槽 -->
      <slot></slot>
      <view v-if="isMounted && register.listData.length == 0">
        <u-empty mode="order" text="暂无内容"> </u-empty>
      </view>
      <u-loadmore
        :status="register.isLast ? 'nomore' : 'loading'"
        v-if="register.listData.length !== 0"
      />
    </template>
    <!-- 渲染之前的过渡loading -->
    <u-loading-page :loading="!isMounted"></u-loading-page>
  </scroll-view>
</template>

<script>
export default {
  components: {},
  props: {
    offset: {
      type: [String, Number],
      default: 0
    },
    register: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 容器高度
      height: 0,
      // 是否挂载完毕
      isMounted: false,
      // 显示列表
      listShow: false
    };
  },
  created() {
    this.resort();
    this.isMounted = false;
    this.listShow = true;
  },
  mounted() {
    setTimeout(() => {
      this.isMounted = true;
      console.log(this.$slots.default);
    }, 300);
  },
  methods: {
    getMoreData() {
      this.$emit("getMoreData");
      console.log(this.register);
      // this.register?.getMoreData();
    },
    onRefresh() {
      this.$emit("onRefresh");
      console.log("onRefresh");
      // this.register?.onRefresh();
    },
    // 重新排列
    resort() {
      uni.$u.getRect(".j-list-cpn").then((res) => {
        this.height =
          uni.getSystemInfoSync().screenHeight - res.top - Number(this.offset);
      });
    }
  }
};
</script>

<style lang="scss">
.j-list-cpn {
  background-color: $j_bgc;
}
</style>
